/*
 * Created: 2020-08-21 14:54:05
 * Author : Mockingbird
 * Email : 1768385508@qq.com
 * -----
 * Description: 创建
 */

import React, {
    useState,
    useImperativeHandle,
    forwardRef,
    useCallback,
    useEffect,
  } from 'react'
  
  import Modal from '@components/Modal'
  import { Form } from 'antd'
  // const options = ['Apple', 'Orange', 'Banana']
  
  const mockData = {
    fruit: ['banana', 'apple', 'orange'],
    vegetables: ['tomatoes', 'potatoes', 'spinach'],
  }
  
  const fetchFood = (food: string) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (mockData[food]) resolve(mockData[food])
        else reject(new Error('Not found'))
      }, 1500)
    })
  }
  // eslint-disable-next-line react-hooks/rules-of-hooks
  
  interface IProps {
    selectedRows?: any[]
  }
  
  function Create(props: IProps, ref: any) {
    const [loading, setLoading] = useState(false)
    const [visible, setVisible] = useState(false)
    // const [formRef, setFormRef] = useState()
    const [form] = Form.useForm()
  
    const [foodList, setFoodList] = useState([])
    // const food = form.getFieldValue('food')
    // const foodloading = food && !foodList[food]
    const [foodloading, setFoodLoading] = useState(false)
    const meta = {
      columns: 1, //显示列数
      preserve: false,
      initialValues: {
        textarea: 'textarea',
      },
      // viewMode: true, //为ture,不能编辑
      // formItemLayout: [8, 16], // Must set this for inline layout
      fields: [
        {
          // noFormItem: true,
          key: 'username', // 键
          label: '用户名',
          widget: 'input', // 自定义组件
          // initialValue: 'hello', // 默认值
          required: true, // 不能为空
          message: '用户名不能为空',
          placeholder: '请输入用户名',
          // tooltip: '提示信息', // 提示
          // formItemLayout: [30, 30], //label宽度，输入框宽度
          // validateTrigger: 'onClick',
          trigger: 'onChange',
          // forwardRef: true,
          // antd自带参数
          // help: '提示信息',
          // extra: '额外的提示信息',
          // noStyle: true,
          // validateStatus: 'warning',
          // hasFeedback: true,
          // readOnly: true,
          // viewMode: true,
          getValueProps: (value: any) => {
          },
        },
        {
          key: 'password',
          label: '密码',
          widget: 'password',
          rules: [
            {
              required: true,
              message: '请输入密码',
            },
          ],
        },
        {
          key: 'food',
          label: 'food',
          widget: 'select',
          options: ['fruit', 'vegetables'],
          placeholder: 'Select food...',
          required: true,
          dynamic: true,
          widgetProps: {
            onSelect: () => {
              form.setFieldsValue({ foodList: undefined })
              const food = form.getFieldValue('food')
              // if (!foodList[food]) {
              // setFoodList((p) => ({ ...p, [food]: undefined }))
              // }
              setFoodLoading(true)
              fetchFood(food).then((arr: any) => {
                setFoodLoading(false)
                setFoodList(arr)
              })
            },
          },
        },
        {
          key: 'foodList',
          label: 'foodList',
          widget: 'select',
          options: foodList,
          placeholder: foodloading ? 'Loading...' : 'Select food...',
          widgetProps: { loading: foodloading },
          disabled: foodloading,
        },
      ],
    }
  
    // const handleSubmit = useCallback((value: any) => {
    //   setLoading(true)
    //   setTimeout(() => {
    //     console.log(value)
    //     setLoading(false)
    //     setVisible(false)
    //   }, 3000)
    // }, [])
  
    const handleSubmit = () => {
      form.validateFields().then((values: any) => {
        setLoading(true)
        setTimeout(() => {
          console.log(values)
          setLoading(false)
          setVisible(false)
        }, 3000)
      })
    }
  
    const handleCancel = () => {
      setVisible(false)
    }
  
    useImperativeHandle(ref, () => ({
      // show 就是暴露给父组件的方法
      show: (selectedRows: any) => {
        setVisible(true)
      },
    }))
    // useEffect(() => {
    //   if ( visible) {
    //     form.resetFields()
    //   }
    // }, [visible, formRef, form])
    // useEffect(() => {
    //   console.log(22222)
    //   if (visible) {
    //     console.log(333333)
    //     if (food && !foodList[food]) {
    //       console.log(444444)
    //       fetchFood(food).then((arr: any) =>
    //         setFoodList((p) => ({ ...p, [food]: arr }))
    //       )
    //     }
    //   }
    // }, [food, foodList, visible])
    return (
      <Modal
        // setFormRef={setFormRef}
        form={form}
        visible={visible}
        title="创建内容"
        confirmLoading={loading}
        draggable={true}
        centered={true}
        formData={meta}
        onSubmit={handleSubmit}
        onCancel={handleCancel}
      ></Modal>
    )
  }
  
  export default forwardRef(Create)